<template>
	<view>
        <!-- #ifndef APP-PLUS -->
        <uni-nav-bar statusBar="true" left-icon="search" @click-left="search" title="分类"></uni-nav-bar>
        <!-- #endif -->
		<view class="page-body">
			<!-- 左侧分类导航 -->
			<scroll-view class="nav-left" scroll-y :style="'height:'+listHeight+'px'">
				<view class="nav-left-item" @click="categoryClickMain(item,index)" :key="index" :class="index==categoryActive?'active':''"
				    v-for="(item,index) in categoryList">
                    <text class="nav-left-item-text uni-ellipsis">{{item.name}}</text>
				</view>
			</scroll-view>
			<!-- 右侧子导航 -->
			<scroll-view class="nav-right" scroll-y :scroll-top="scrollTop" @scroll="scroll" :style="'height:'+listHeight+'px'" scroll-with-animation>
                <view class="imgBanner--card" v-if="subCategory.imgUrl!=''" @tap="clickGoto(subCategory.imgLink)">
                    <image class="imgBanner__img" :src="subCategory.imgUrl" mode="aspectFill"></image>
                </view>
				<view :id="index===0?'first':''" class="nav-right-item" v-for="(item,index) in subCategory.subCategoryList" :key="index">
					<image class="nav-right-item-img" :src="item.imgUrl" />
					<view class="nav-right-item-text">{{item.name}}</view>
				</view>
				<view class="nav-right-item" v-if="subCategory.link!=''">
					<image class="nav-right-item-img" src="../../../static/icon/more.png" />
					<view class="nav-right-item-text">更多{{subCategory.name}}</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import uniNavBar from '@/components/uni-nav-bar.vue';

	import {
		router
	} from '@/common/util.js';
    
	export default {
		components: {
			uniNavBar
		},
		data() {
			return {
				categoryList: [
                    {
						"name": "水果",
                        "link": "12",
                        "imgUrl": "/static/temp/banner (1).png",
                        "imgLink": "",
						"subCategoryList": [{
							"name": "进口水果",
                            "link": "",
							"imgUrl": "/static/temp/grid (1).jpeg"
						},{
							"name": "热带水果",
                            "link": "",
							"imgUrl": "/static/temp/grid (2).jpeg"
						},{
							"name": "苹果梨",
                            "link": "",
							"imgUrl": "/static/temp/grid (3).jpeg"
						},{
							"name": "葡萄提子",
                            "link": "",
							"imgUrl": "/static/temp/grid (4).jpeg"
						},{
							"name": "橙柑橘柚",
                            "link": "",
							"imgUrl": "/static/temp/grid (5).jpeg"
						},{
							"name": "奇异果",
                            "link": "",
							"imgUrl": "/static/temp/grid (6).jpeg"
						},{
							"name": "水果礼盒",
                            "link": "",
							"imgUrl": "/static/temp/grid (7).jpeg"
						}]
                    },
                    {
						"name": "蔬菜水果水果水果",
                        "link": "",
                        "imgUrl": "",
						"subCategoryList": [{
							"name": "进口水果进口水果进口水果2",
                            "link": "",
							"imgUrl": "/static/temp/grid (7).jpeg"
						},{
							"name": "热带水果2",
                            "link": "",
							"imgUrl": "/static/temp/grid (7).jpeg"
						},{
							"name": "苹果梨2",
                            "link": "",
							"imgUrl": "/static/temp/grid (7).jpeg"
						},{
							"name": "葡萄提子2",
                            "link": "",
							"imgUrl": "/static/temp/grid (7).jpeg"
						},{
							"name": "橙柑橘柚2",
                            "link": "",
							"imgUrl": "/static/temp/grid (7).jpeg"
						},{
							"name": "奇异果2",
                            "link": "",
							"imgUrl": "/static/temp/grid (7).jpeg"
						}]
                    },
                    {
						"name": "海鲜水产",
                        "link": "",
                        "imgUrl": "",
						"subCategoryList": [{
							"name": "进口水果3",
                            "link": "",
							"imgUrl": "/static/temp/grid (7).jpeg"
						},{
							"name": "热带水果3",
                            "link": "",
							"imgUrl": "/static/temp/grid (7).jpeg"
						},{
							"name": "苹果梨3",
                            "link": "",
							"imgUrl": "/static/temp/grid (7).jpeg"
						},{
							"name": "葡萄提子3",
                            "link": "",
							"imgUrl": "/static/temp/grid (7).jpeg"
						},{
							"name": "橙柑橘柚3",
                            "link": "",
							"imgUrl": "/static/temp/grid (7).jpeg"
						},{
							"name": "奇异果3",
                            "link": "",
							"imgUrl": "/static/temp/grid (7).jpeg"
						}]
                    }
                ],
				subCategory: {
                    "name": "蔬菜",
                    "link": "",
                    "imgUrl": "",
                    "imgLink": "",
                    "subCategoryList": []
                },
				listHeight: 0,
				categoryActive: 0,
				scrollTop: 0,
				scrollHeight: 0
			}
		},
		methods: {
			search() {
                router.navigateBack();
				// router.navigateTo('/pages/good/search/search');
			},
			clickGoto(url) {
				uni.showToast({
					title: '跳转'
				})
			},
			scroll(e) {
				this.scrollHeight = e.detail.scrollHeight;
			},
			categoryClickMain(categroy, index) {
				this.categoryActive = index;
				this.subCategory = categroy;
				this.scrollTop = -this.scrollHeight * index;
			},
			getCategory() {
				this.subCategory = this.categoryList[0];
			}
		},
		onLoad: function () {
			this.getCategory();
		},
        onReady() {
			this.listHeight = uni.getSystemInfoSync().windowHeight;
			// #ifndef APP-PLUS
			uni.createSelectorQuery().select("#header").boundingClientRect((data) => {
				this.listHeight = this.listHeight - data.height;
			}).exec();
			// #endif
        }
	}
</script>

<style lang="scss">
    @import '@/style/mixin/text-overflow.scss';
    @import '@/style/page/img-banner.scss';
    
	.page-body {
		display: flex;
	}

	.nav {
		display: flex;
		width: 100%;
	}

	.nav-left {
		width: 220upx;
        background-color: #f7f7f7;
        box-shadow: -6px -6px 6px #eee inset;
	}

	.nav-left-item {
		height: 100upx;
		font-size: 30upx;
		display: flex;
		align-items: center;
	}
    .nav-left-item-text{
        flex-grow: 1;
        text-align: center;
    }
	.nav-right {
        box-sizing: border-box;
        padding: 16upx;
		width: 530upx;
        background-color: white;
	}

	.nav-right-item {
		width: 143upx;
		height: 220upx;
		float: left;
		text-align: center;
		padding: 12upx;
		font-size: 28upx;
        overflow: hidden;
	}

	.nav-right-item-img {
		width: 100upx;
		height: 100upx;
	}

	.nav-right-item-text {
        @include text-overflow(null, 2);
	}

	.active {
		color: $uni-color-primary;
        background-color: white;
        box-shadow: -1px 1px 6px #ccc inset;
	}
    
    .active::before {
        content: '';
        width: 8upx;
        height: 32upx;
        background-color: $uni-color-primary;
    }
</style>